<template>
  <div class="student">
    <h2>学生名字:{{ name }}</h2>
    <h2>学生年龄:{{ age }}</h2>
    <button @click="sendName">点我给app传递数据</button>
    <button @click="unbind">点我解绑自定义事件</button>
    <button @click="death">点我销毁Student组件实例对象(vc)</button>
  </div>
</template>

<script>
//暴露组件
export default {
  name: 'Student',
  //data一定要写成函数
  data() {
    return {
      name: '张三',
      age: 18,
    };
  },
  methods: {
    sendName() {
      // 使用 this.$emit(自定义事件名,参数) 来触发自定义事件
      this.$emit('atguigu', this.name);
      this.$emit('click');
    },
    unbind() {
      // 解绑一个事件
      this.$off('atguigu');
      // 解绑多个事件
      // this.$off(['atguigu', 'demo']);
      // 解绑vc身上所有的事件
      // this.$off();
    },
    death() {
      // vc销毁(自杀)之后身上绑定的事件就都没有了
      this.$destroy();
    },
  },
};
</script>

<style scoped>
.student {
  background-color: blue;
}
</style>
